<template>
  <div>
    <div class="box">
      <el-form>
        <el-row :gutter="20">

          <!-- 选择供应商 -->
          <el-col :span="6">
            <el-form-item label="供应商">
              <el-button @click="goodsSupplierSelect.open()">
                {{ goodsSupplierOfSelect.name }}
              </el-button>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="状态">
              <ProcureOrderStatusSelect
              @select="procureOrderStatusSelectSelect"
              ></ProcureOrderStatusSelect>
            </el-form-item>
          </el-col>


          <el-col :span="6">
            <el-form-item label="单号">
              <el-input
                size="large"
                :placeholder="'输入单号'"
                v-model="requestParam.data.order"
                autocomplete="off"
                @keyup.enter.native="getBodyData()"
              ></el-input>
            </el-form-item>
          </el-col>

          <!-- 备注 -->
          <el-col :span="6">
            <el-form-item label="备注">
              <el-input
                size="large"
                :placeholder="'输入备注'"
                v-model="requestParam.data.remark"
                autocomplete="off"
                @keyup.enter.native="getBodyData()"
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="时间">
              <el-date-picker
                size="large"
                v-model="requestParam.data.gmtCreateStart"
                type="date"
                placeholder="选择日期"
                value-format="x"
                style="width: calc(50% - 10px)"
                autocomplete="off"
                @change="getBodyData()"
              ></el-date-picker>

              {{ " - " }}

              <el-date-picker
                size="large"
                v-model="requestParam.data.gmtCreateEnd"
                type="date"
                placeholder="选择日期"
                value-format="x"
                style="width: calc(50% - 10px)"
                autocomplete="off"
                @change="getBodyData()"
              ></el-date-picker>
            </el-form-item>
          </el-col>

          <!-- 查询 -->
          <el-col :span="6">
            <el-form-item>
              <el-button
                size="large"
                type="primary"
                @click.prevent="getBodyData()"
                >查询</el-button
              >
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <div class="box">
      <el-card>
        <template #header>
          <div class="card-header">
            <span>供应商管理</span>
            <el-button
              style="float: right"
              size="mini"
              type="primary"
              @click.prevent="toSave('')"
              >添加采购单</el-button
            >

          </div>
        </template>

        <el-table
          ref="table"
          @selection-change="selectionChange"
          :reserve-selection="true"
          v-loading="loading"
          element-loading-text="Loading..."
          :data="bodyData.content"
          style="width: 100%"
          row-key="id"
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
          max-height="500px"
        >

          <!-- 状态名称 -->
          <el-table-column label="状态">
            <template #default="{ row }">
              {{ goodsJs.getNameByPurchaseOrderStatusCode(row.statusCode) }}
            </template>
          </el-table-column>
          
          <!-- 单号 -->
          <el-table-column label="单号" prop="order" />

          <!-- 供应商名称 -->
          <el-table-column label="供应商" prop="supplier.name" />

          <!-- 仓库 -->
          <el-table-column label="仓库" prop="warehouse.name" />

          <!-- 备注 -->
          <el-table-column label="备注" prop="remark" />

          <!-- 费用金额 -->
          <el-table-column label="费用金额">
            <template #default="{ row }">
              ￥{{row.feeAmount}}
            </template>
          </el-table-column>

          <!-- 抹零金额 -->
          <el-table-column label="抹零金额">
            <template #default="{ row }">
              ￥{{row.zeroAmount}}
            </template>
          </el-table-column>

          <!-- 总金额 -->
          <el-table-column label="总金额">
            <template #default="{ row }">
              ￥{{row.totalAmount}}
            </template>
          </el-table-column>



          

          <el-table-column label="创建时间" width="180">
            <template #default="{ row }">
              {{ $kt.date.format(row.gmtCreate, "yyyy-MM-dd hh:mm:ss") }}
            </template>
          </el-table-column>

          <el-table-column fixed="right" label="" width="120">
            <template #default="scope">
              <el-button
                link
                type="primary"
                size="small"
                v-if="scope.row.statusCode == 'draft'"
                @click.prevent="toEdit(scope.row)"
              >
                修改
              </el-button>

              <el-button
                link
                type="primary"
                size="small"
                v-if="scope.row.statusCode == 'purchased'"
                @click.prevent="dialogOfView.open(scope.row)"
              >
                查看
              </el-button>


            </template>
          </el-table-column>
        </el-table>
        <div style="position: relative; height: 30px">
          <el-pagination
            @current-change="pageChange"
            style="
              position: absolute;
              left: 50%;
              top: 10px;
              transform: translateX(-50%);
            "
            layout="prev, pager, next"
            :page-size="requestParam.pageSize"
            :current-page="requestParam.pageNumber"
            :total="bodyData.totalElements"
          />
        </div>
      </el-card>
    </div>

    <DialogOfSave ref="dialogOfSave" @submit="getBodyData()" />
    <GoodsSupplierSelect ref="goodsSupplierSelect" 
    @select="goodsSupplierSelectSelect" />
    <DialogOfView ref="dialogOfView" @revoke="getBodyData()" />
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import $kt from "@/vueKantboot";
import DialogOfSave from "./components/DialogOfSave.vue";
import { ElMessage, ElMessageBox } from "element-plus";
import GoodsSupplierSelect from "@/components/goodsSupplierSelect/Body.vue";
import ProcureOrderStatusSelect from "./components/ProcureOrderStatusSelect.vue";
import goodsJs from "@/commonJs/goods/index.js";
import DialogOfView from "./components/DialogOfView.vue";

let dialogOfSave = ref();

let dialogOfView = ref();

let goodsSupplierSelect = ref();


let goodsSupplierOfSelect = ref({
  id: null,
  name: "未选择供应商",
});

let goodsSupplierSelectSelect = (param: any) => {
  goodsSupplierOfSelect.value = param;
  requestParam.value.data.supplierId = param.id;
  getBodyData();
};


let table = ref();

let toSave = (param: any) => {
  dialogOfSave.value.open(param);
};

let requestParam = ref({
  data: {
    gmtCreateStart: null, //开始时间
    gmtCreateEnd: null, //结束时间
    statusCode: null, //状态
    supplierId: null, //供应商id
    order: null, //订单
    remark: null, //备注
  },
  pageNumber: 1,
  pageSize: 30,
});

let isTop = ref(true);

let bodyData = ref({
  content: [
    {
      gmtCreate: 1699087258000, //开始时间
      gmtModified: 1699087261000,
      id: 1,
      inList: [],
      name: "1", //采购单
      order: "1", //订单
      remark: "2", //备注
      status: {
        code: "draft",
        id: 1,
        name: "草稿",
      },
      statusCode: "draft", //状态
      supplier: {
        addressCode: null,
        addressDetail: null,
        bankAccount: null,
        bankName: null,
        discount: 0.95,
        due: 100,
        dueToSupplier: {
          due: 100,
          gmtCreate: 1698978695000,
          gmtModified: null,
          id: 1001,
          supplierId: 1001,
        },
        email: null,
        gmtCreate: 1698977999905,
        gmtModified: 1698977999905,
        id: 1001,
        mobile: null,
        name: "测试01",
        phone: null,
        principalName: "方测试",
        remark: null,
        website: null,
      }, //供应商
      supplierId: 1001,
      userIdOfCreate: 1,
      warehouse: {
        empIdOfManager: null,
        empOfManager: null,
        gmtCreate: 1698739893796,
        gmtModified: 1698739893796,
        id: 477607904501765,
        name: "2号仓库",
        remark: null,
        store: null,
        storeId: null,
      },
      warehouseId: 477607904501765,
    },
  ],
  totalElements: 0,
  feeAmount: 10,
  zeroAmount: 10,
  totalAmount: 0,
});

let selection = ref([]);

let selectionChange = (val: any) => {
  selection.value = val;
};

let toEdit = (param: any) => {
  dialogOfSave.value.open(param);
};

let pageChange = (val: any) => {
  requestParam.value.pageNumber = val;
  getBodyData();
};

let toAddChildren = (param: any) => {
  dialogOfSave.value.open({
    id: "",
    name: "",
    parentId: param.id,
    fileIdOfImg: "",
  });
};

let loading = ref(true);

let getBodyData = () => {
  loading.value = true;
  $kt.request
    .request({
      url: "/business-goods-web/admin/goodsProcureOrder/getBodyData",
      method: "post",
      data: requestParam.value,
    })
    .then((res) => {
      if (res.data.success) {
        bodyData.value = res.data.data;
      }
      loading.value = false;
    });
};

let procureOrderStatusSelectSelect=(param:any)=>{
  requestParam.value.data.statusCode = param;
  getBodyData();
}

getBodyData();

let removeBatch = () => {
  $kt.request
    .request({
      url: "/business-goods-web/admin/goodsProcureOrder/removeBatch",
      method: "post",
      data: selection.value,
    })
    .then((res) => {
      if (res.data.success) {
        ElMessage({
          message: "删除成功",
          type: "success",
        });
        getBodyData();
        return false;
      }
      ElMessage({
        message: res.data.errMsg,
        type: "error",
      });
    });
};

let toRemoveBatch = () => {
  if (selection.value.length == 0) {
    ElMessage({
      message: "请选择要删除的数据",
      type: "error",
    });
    return false;
  }

  // 询问是否删除
  ElMessageBox.confirm("此操作将永久删除该文件, 是否继续?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      // 删除
      removeBatch();
    })
    .catch(() => {
      // 取消
      ElMessage({
        type: "info",
        message: "已取消删除",
      });
    });
};
</script>

<style lang="scss" scoped>
.box {
  padding: 20px 20px 0 20px;
}

.box-box {
  background-color: #fff;
  color: #fff;
  text-align: center;
  padding: 30px;
  border-radius: 5px;
}

.box-box:hover {
  // 变小
  transform: scale(0.95);
}

.box-box:active {
  // 变小
  transform: scale(0.9);
}
</style>
